<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./OL_SDK/include-openlayers-local.js"></script>
    <script src="./libs/gaode.js"></script>
    <script src="https://lib.baomitu.com/jquery/2.2.4/jquery.js"></script>
</head>

<body>
    <div id="dir"></div>
    <div id="map">
    </div>
    <script>
        var docLayer = new Zondy.Map.Doc("", "dir", {

        })
        var map = new ol.Map({
            target: "map",
            layers: [gaode, docLayer],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [114.30, 30.50],
                zoom: 4
            })
        })
        const docCatalog = new Zondy.Catalog.MapDoc({
            docName: "dir"
        })
        /* 获取图层目录树的信息 */
        var childrens = []
        /* http请求 */
        docCatalog.getLayersInfo(data => {
            data.value.forEach(item => {
                childrens.push({
                    id: item.LayerIndex,
                    name: item.Name
                })
            })
            console.log(childrens);
            childrens.forEach(item => {
                let tempale = `
                <input type="checkbox" checked id="${item.id}">${item.name}
                `
                $("#dir").append(tempale)
            })
        })
        /*  window.onload = function () {
             $("#dir input").change(function (evt) {
                 var checked = evt.target.checked
                 console.log(checked)
                 var index = $(this).index();
                 docLayer.setLayerStatus(index, checked ? 'include' : 'exclude')
             })
         } */
        setTimeout(() => {
            $("#dir input").change(function (evt) {
                var checked = evt.target.checked
                console.log(checked)
                var index = $(this).index();
                docLayer.setLayerStatus(index, checked ? 'include' : 'exclude')
            })
        }, 500)

    </script>
</body>

</html>